<template>
  <div
    class="chart-line"
  >
    <ve-line
       ref="chart"
      :colors="colors"
      :series="series"
      :y-axis="yAxis"
      :x-axis="xAxis"
      :tooltip="tooltip"
    ></ve-line>
  </div>
</template>

<script>

  export default {
    name: "single-line",

    props: {
      list: [Array, Object],
      format: Function,
      title: {}
    },
    data() {
      const self = this;

      return {
        colors: ['#1e5adc','#d20d25', '#e6a23c',
          '#d48265', '#91c7ae','#749f83',
          '#ca8622', '#bda29a','#6e7074',
          '#546570', '#c4ccd3'],
        xAxis: {
          data: []
        },
        yAxis: {
          axisLabel: {
            formatter(value, index) {
              if (parseInt(value) != value) {
                return "";
              }
              return parseInt(value);
            }
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          backgroundColor: 'rgba(255,255,255,1)',
          borderWidth: 1,
          borderColor: 'rgba(234,234,234,1)',
          padding: 10,
          extraCssText: 'box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.08);',
          textStyle: {
            color: '#000'
          },
          // formatter(params, ticket, callback) {
            // params[0];
            // axisDim: "x"
            // axisId: "series00"
            // axisIndex: 0
            // axisType: "xAxis.category"
            // axisValue: "2018/11/20"
            // axisValueLabel: "2018/11/20"
            // color: "#1e5adc"
            // componentIndex: 0
            // componentSubType: "line"
            // componentType: "series"
            // data: 2500
            // dataIndex: 17
            // dataType: undefined
            // marker: "<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1e5adc;"></span>"
            // name: "2018/11/20"
            // seriesId: "总存款额0"
            // seriesIndex: 0
            // seriesName: "总存款额"
            // seriesType: "line"
            // value: 2500
//             console.log(self);
//             return `<div>
// <div>09: 00-09: 59 数据</div>
// <div>充值 0</div>
// <div>对比上月 +12.58%</div>
// </div>`;
//           }
          // axisPointer: {
          //   type: 'cross',
          //   label: {
          //     backgroundColor: '#6a7985'
          //   }
          // }
        },
        series: [
          {
            type: 'line',
            symbol: 'circle',
            symbolSize: 5,
            data: [],
            areaStyle: {
              origin: 'start',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(30, 90, 220, 0.21)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
                }],
              }
            }
          },
        ],
      }
    },

    watch: {
      cList(cList) {
        this.series[0].name = this.title;
        this.series[0].data = _.map(cList, this.title);
        this.xAxis.data = _.map(cList, '日期');
      }
    },

    computed: {
      cList() {
        return _(this.list).map((value, date) => {
          return {
            '日期': date,
            ...(this.format ? this.format(value) : {[this.title]: value}),

          };
        }).orderBy(['日期'], ['asc']).value();
      }
    }
  }
</script>

<style lang="scss">
  @include b(chart-line) {
    width: 100%;
  }
</style>
